<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\..\node_modules\vue\dist\vue.js"></script>
    <script src="..\..\node_modules\vue-router\dist\vue-router.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <p></p>
    <router-link to="/foo/hello">Go to Foo</router-link>
    <router-view></router-view>
</div>
</body>
<script type="application/javascript">
    // const Foo = {
    //     template: '<div>{{$route.params.message + (!!$route.query.sign ? $route.query.sign : "!")}}</div>'
    // };

    const Foo = function(){
        return Promise.resolve(
            {
                template: '<div>{{$route.params.message + (!!$route.query.sign ? $route.query.sign : "!")}}</div>'
            }
        );
    }

    const routes = [
        { path: '/foo/:message', component: Foo}
    ];

    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    });

    const app = new Vue({
        router,
        data:{
            "message":"hello vue router"
        }
    }).$mount('#app');


    var r = null;
    new Promise(function(resolve , reject){
        console.log('promiss called')
        resolve(1);
    })
    .then(function(v){console.log('then called : ' + v);r = v;})
    .catch(function(e){console.log('catch called' + e);})
    .finally(function(){console.log('finally called');})

</script>
</html>